<template>
  <div class="app-container">
    <div class="card-list">
      <el-row class="mb20">
        <el-col :span="6" v-for="(item,index) in cardList" :key="index">
          <div class="card-item">
            <el-card class="box-card">
              <div class="card-content-group">
                <span class="currency">{{ item.title }}</span>
                <count-to
                  :start-val="0"
                  :end-val="item.number ? item.number : 0"
                  :duration="2600"
                  class="card-panel-num"
                />
              </div>
            </el-card>
          </div>
        </el-col>
      </el-row>
    </div>
    <el-card style="margin-bottom: 10px">
      <div class="my-tabs">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane
            :label="tab.label"
            :name="tab.name"
            v-for="(tab,index) in tabList"
            :key="index"
          ></el-tab-pane>
        </el-tabs>
      </div>
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
        <el-form-item label="子单号" prop="skuOrderId">
          <el-input
            v-model="queryParams.skuOrderId"
            placeholder="请输入子单号"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="商户名" prop="shopName">
          <el-input
            v-model="queryParams.shopName"
            placeholder="请输入商户名"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="订单时间">
          <date-range-picker
            ref="datePicker"
            :multiple="true"
            v-model="queryParams"
            value-format="timestamp"
            content-style="width: 240px"
            startPickerName="startTime"
            endPickerName="endTime"
          />
        </el-form-item>
        <!--      <el-form-item label="审批状态" prop="passFlag">
                <dict-select :options="dict.type.audit_type" v-model="queryParams.passFlag" placeholder="请选择审核状态"/>
        </el-form-item>-->
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-table v-loading="loading" :data="applyList">
      <el-table-column
        label="订单号"
        align="center"
        prop="orderNo"
        width="160"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="子单号"
        align="center"
        prop="skuOrderId"
        width="160"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="店铺名称"
        align="center"
        prop="shopName"
        width="160"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="支付类型"
        align="center"
        prop="payType"
        width="120"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          <dict-tag :options="dict.type.order_pay_status" :value="scope.row.payType"></dict-tag>
        </template>
      </el-table-column>
      <!--      <el-table-column label="商品信息" align="center" prop="shopName" width="160" :show-overflow-tooltip="true"/>-->
      <el-table-column
        label="用户名称"
        align="center"
        prop="username"
        width="160"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="收货人"
        align="center"
        prop="consigUser"
        width="160"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="手机号"
        align="center"
        prop="mobile"
        width="160"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="地址"
        align="center"
        prop="address"
        width="160"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="单价"
        align="center"
        prop="price"
        width="160"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          <span>{{$yun.priceFormatter(scope.row.price)}}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="数量"
        align="center"
        prop="num"
        width="120"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="金额"
        align="center"
        prop="money"
        width="120"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          <span>{{$yun.priceFormatter(scope.row.money)}}</span>
        </template>
      </el-table-column>
      <!--      <el-table-column label="运单号" align="center" prop="express" width="120" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span v-if="scope.row.skuOrderStatus != 1">{{scope.row.express}}</span>
          &lt;!&ndash; v-if="activeName == 'orderStatus_3' || activeName == 'orderStatus_2'"&ndash;&gt;
        </template>
      </el-table-column>-->
      <el-table-column
        label="图片"
        align="center"
        prop="image"
        width="120"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          <oss-image-preview :src="scope.row.image" :width="40" :height="40"></oss-image-preview>
        </template>
      </el-table-column>
      <el-table-column
        label="创建时间"
        align="center"
        prop="createDate"
        width="180"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.orderCreateTime, '{m}/{d}/{y}') }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        width="300"
        fixed="right"
      >
        <template slot-scope="scope">
          <span>
            <el-button
              size="mini"
              type="text"
              class="mini-btn-left"
              plain
              icon="el-icon-notebook-2"
              @click="handleDetails(scope.row)"
            >详情</el-button>
          </span>
          <span v-if="scope.row.skuOrderStatus == 2 && !scope.row.express">
            <!--            <el-button size="mini" type="text" plain icon="el-icon-close" @click="handlePass(scope.row.id)">关闭订单</el-button>-->
            <el-button
              size="mini"
              type="text"
              class="mini-btn-left"
              icon="el-icon-position"
              plain
              @click="handleDelivery(scope.row)"
            >填运单号</el-button>
            <!--            <el-button size="mini" type="text" icon="el-icon-money" plain @click="handleReject(scope.row.id)">退款</el-button>-->
          </span>
          <!--          <span v-if="scope.row.skuOrderStatus != 2 || activeName !='all'">
            <el-button size="mini" type="text" class="mini-btn-left" plain icon="el-icon-close"
                       @click="handleClose(scope.row)"
            >结束订单</el-button>
          </span>-->
          <!--            <span v-if="scope.row.payStatus != 0">
                      <el-button size="mini" type="text" class="mini-btn-left" icon="el-icon-money" plain
                                 @click="handleReturnMoney(scope.row)"
                      >退款</el-button>
          </span>-->
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.current"
      :limit.sync="queryParams.size"
      @pagination="getList"
    />
    <!--    <el-dialog title="订单详情"  :visible.sync="open" width="700px" append-to-body>
          <el-card>
            <el-row>
              <el-col :span="4">订单ID</el-col>
              <el-col :span="20">{{ detailsObj.id }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="4">订单状态</el-col>
              <el-col :span="20">{{ detailsObj.orderStatus }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="4">支付状态</el-col>
              <el-col :span="20"><dict-tag :options="dict.type.pay_status" :value="detailsObj.payType" /></el-col>
            </el-row>
            <el-row>
              <el-col :span="4">邮费</el-col>
              <el-col :span="20">{{ detailsObj.totalPostage	 }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="4">金额合计</el-col>
              <el-col :span="20">{{ detailsObj.moneys }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="4">用户名称</el-col>
              <el-col :span="20">{{ detailsObj.userName }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="4">收货人</el-col>
              <el-col :span="20">{{ detailsObj.consigUser }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="4">收货人手机号</el-col>
              <el-col :span="20">{{ detailsObj.mobile }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="4">收货人手地址</el-col>
              <el-col :span="20">{{ detailsObj.address}}</el-col>
            </el-row>
            <el-row>
              <el-col :span="4">发货时间</el-col>
              <el-col :span="20">{{ detailsObj.consignTime }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="4">商品规格</el-col>
              &lt;!&ndash;          <el-col :span="20">{{detailsObj.shopSellTaskId}}</el-col>&ndash;&gt;
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-table :data="orderSku">
                  <el-table-column label="skuId" align="center" prop="skuId" width="120"
                                   :show-overflow-tooltip="true"
                  />
                  <el-table-column label="商品名称" align="center" prop="name" width="120"
                                   :show-overflow-tooltip="true"
                  />
                  <el-table-column label="单价" align="center" prop="price" width="120" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                      {{$yun.priceFormatter(scope.row.price)}}
                    </template>
                  </el-table-column>
                  <el-table-column label="数量" align="center" prop="num" width="120" :show-overflow-tooltip="true"/>
                  <el-table-column label="总金额" align="center" prop="money" width="120" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                      {{$yun.priceFormatter(scope.row.money)}}
                    </template>
                  </el-table-column>
                  <el-table-column label="图片" align="center" prop="image" width="120" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                      <oss-image-preview :src="scope.row.image" width="40" height="40"></oss-image-preview>
                    </template>
                  </el-table-column>
                </el-table>
              </el-col>
            </el-row>
          </el-card>
    </el-dialog>-->

    <el-dialog title="订单详情" :visible.sync="open" width="1000px" append-to-body>
      <el-card>
        <el-steps :active="stepNum" align-center>
          <el-step title="下单" :description="description_1"></el-step>
          <el-step title="付款" :description="description_2"></el-step>
          <el-step title="发货" :description="description_3"></el-step>
          <el-step title="交易完成" :description="description_4"></el-step>
        </el-steps>
        <div class="card-group">
          <el-row>
            <el-col :span="12">
              <div class="details-item-group">
                <div style="font-size: 18px;padding-top: 30px">订单信息</div>
                <el-divider></el-divider>
                <div class="details-content">
                  <!-- <div>订单号：{{detailsObj.id}}</div> -->
                  <div>下单时间：{{ parseTime(detailsObj.createTime, '{m}/{d}/{y}') }}</div>
                  <!--                  <div>订单来源：</div>-->
                  <div>
                    支付方式：
                    <div class="audit-group">
                      <dict-tag :options="dict.type.pay_status" :value="detailsObj.payType" />
                    </div>
                  </div>
                  <div>订单号：{{detailsObj.orderNo}}</div>
                  <!--                  <div>订单备注：</div>-->
                  <div>收货地址：{{detailsObj.address}}</div>
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="details-item-group">
                <div style="font-size: 18px;padding-top: 30px">收货信息</div>
                <el-divider></el-divider>
                <div class="details-content">
                  <div>买家：{{detailsObj.userName}}</div>
                  <!--                  <div>买家备注：</div>
                  <div>配送方式：</div>-->
                  <div>收货人：{{detailsObj.consigUser}}</div>
                  <div>手机号：{{detailsObj.mobile}}</div>
                </div>
              </div>
            </el-col>
            <!--            <el-col :span="8">
              <div class="">
                <div>发票信息</div>
                <el-divider></el-divider>
                <div class="details-content">
                  <div>抬头类型：</div>
                  <div>发票类型：</div>
                  <div>发票抬头：</div>
                  <div>纳税人识别码：</div>
                  <div>开户行：</div>
                  <div>银行账户：</div>
                  <div>注册地址：</div>
                  <div>操作：</div>
                </div>
              </div>
            </el-col>-->
          </el-row>
          <el-row>
            <el-col :span="4" style="padding: 10px 0;font-size: 18px">商品信息</el-col>
            <!--            <el-col :span="20">{{ detailsObj.shopSellTaskId }}</el-col>-->
          </el-row>
          <el-row class="card-group">
            <el-col :span="24">
              <el-table :data="orderSku" :span-method="arraySpanMethod">
                <!--              <el-table :data="orderSku">-->
                <el-table-column
                  label="商品名称"
                  align="center"
                  prop="name"
                  width="120"
                  :show-overflow-tooltip="true"
                />
                <el-table-column
                  label="单价"
                  align="center"
                  prop="price"
                  width="120"
                  :show-overflow-tooltip="true"
                >
                  <template slot-scope="scope">{{ $yun.priceFormatter(scope.row.price) }}</template>
                </el-table-column>
                <el-table-column
                  label="购买数量"
                  align="center"
                  prop="num"
                  width="120"
                  :show-overflow-tooltip="true"
                />
                <!-- <el-table-column label="已发货数量" align="center" prop="" width="120" :show-overflow-tooltip="true"/> -->
                <el-table-column
                  label="优惠"
                  align="center"
                  prop
                  width="120"
                  :show-overflow-tooltip="true"
                />
                <el-table-column
                  label="运单号"
                  align="center"
                  prop="express"
                  width="120"
                  :show-overflow-tooltip="true"
                />
                <el-table-column
                  label="状态"
                  align="center"
                  prop="orderStatus"
                  width="120"
                  :show-overflow-tooltip="true"
                >
                  <template slot-scope="scope">
                    <dict-tag
                      :options="dict.type.order_status"
                      :value="scope.row.orderStatus"
                      v-if="scope.row.orderStatus"
                    ></dict-tag>
                    <!--                    <dict-tag :options="dict.type.pay_status" value="0" v-else></dict-tag>-->
                  </template>
                </el-table-column>
                <el-table-column
                  label="合计"
                  align="center"
                  prop
                  width="190"
                  :show-overflow-tooltip="true"
                >
                  <template slot-scope="scope">
                    <div>总金额(含运费){{detailsObj.moneys}}</div>
                    <div>运费{{detailsObj.totalPostage}}</div>
                    <div>余额支付</div>
                    <div>实际付款</div>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
          </el-row>
        </div>
      </el-card>
    </el-dialog>
  </div>
</template>

<script>
import { close, details, list, statistics, express } from '@/api/order/list'
import OssImagePreview from '@/components/ImagePreview/oss-image-preview.vue'
import CountTo from 'vue-count-to'
import DateRangePicker from '@/components/DateRangePicker/index.vue'
import Template from '@/views/setting/template/index.vue'
import { priceFormatter } from '@/utils/yun'
import { auditAjax } from '@/api/store/recharge'
import { delAdvertisement } from '@/api/advertisement/indexhAdvertisement'

export default {
  name: 'Apply',
  components: { Template, DateRangePicker, OssImagePreview, CountTo },
  dicts: ['audit_type', 'pay_status', 'order_status', 'order_pay_status'],
  data () {
    return {
      tabList: [
        { label: '全部', name: 'all', orderStatus: null },
        { label: '未支付', name: 'orderStatus_0' },
        { label: '待发货', name: 'orderStatus_1' },
        { label: '已发货', name: 'orderStatus_2' },
        { label: '已收货', name: 'orderStatus_3' },
        { label: '已取消', name: 'orderStatus_-1' },
        { label: '售后已申请', name: 'orderStatus_4' },
        { label: '售后已确认', name: 'orderStatus_5' },
        { label: '售后已完成', name: 'orderStatus_6' },
      ],
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 主播直播带货申请表格数据
      applyList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        current: 1,
        size: 10,
        orderNo: null,
        shopName: null,
        orderId: null,
      },
      detailsObj: {},
      orderSku: [],
      cardList: [
        { title: '订单数量', number: 0 },
        { title: '订单金额 $', number: 0 },
        { title: '今日订单数量', number: 0 },
        { title: '今日支付总数 $', number: 0 }
      ],
      activeName: 'all',
      statistics: {},
      userId: '',
      shopId: '',
      dateRange: [],
      stepNum: 0,
      spanArr: [],
      pos: 0,
      //进度备注
      description_1: '',
      description_2: '',
      description_3: '',
      description_4: '',
    }
  },
  created () {
    if (this.$route.query.id) {
      this.userId = this.$route.query.id
    }
    if (this.$route.query.shopId) {
      this.shopId = this.$route.query.shopId
    }
    if (this.$route.query.orderId) {
      this.queryParams.orderId = this.$route.query.orderId
    }
    this.getStatistics()
    if (this.$route.query.orderStatus == '0') {
      this.activeName = 'orderStatus_0'
      this.queryParams.orderStatus = '0'
    }
    this.getList()
    // this.getSpanArr(this.orderSku);
  },
  methods: {
    priceFormatter,
    handleClick (tab, event) {
      switch (tab.name) {
        case 'all':
          this.queryParams = { current: 1, size: 10 }
          break
        default:
          var result = tab.name.match(/-?\d+/)
          this.queryParams = { current: 1, size: 10, orderStatus: result[0] }
          break
      }
      this.getList()
    },
    /** 查询统计数据*/
    getStatistics () {
      statistics().then(response => {
        // this.statistics = response.data;
        this.cardList = [
          { title: '订单数量', number: parseInt(response.data.total) },
          { title: '订单金额 $', number: parseInt(response.data.sumMoney) },
          { title: '今日订单数量', number: parseInt(response.data.todayTotal) },
          { title: '今日支付总数 $', number: parseInt(response.data.todaySumMoney) }
        ]
      })
    },
    /** 查询主播直播带货申请列表 */
    getList () {
      this.loading = true
      list({ ...this.queryParams, userId: this.userId, shopId: this.shopId }).then(response => {
        this.applyList = response.data.records
        this.total = response.data.total
        this.loading = false
      })
    },
    /** 搜索按钮操作 */
    handleQuery () {
      this.queryParams.current = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery () {
      this.$refs.queryForm.resetFields()
      this.queryParams.startTime = null
      this.queryParams.endTime = null
      this.queryParams.orderId = null
      this.$refs.datePicker.innerDateRange = null
      this.handleQuery()
    },
    //查看详情
    handleDetails: function (row) {
      if (row.payStatus == 0 && !!!row.skuOrderStatus) {
        this.stepNum = 1
      } else if (row.payStatus == 1 && !!!row.skuOrderStatus) {
        this.stepNum = 2
      } else if (row.skuOrderStatus == 0 || row.skuOrderStatus == 1) {
        this.stepNum = 3
      } else {
        this.stepNum = 4
      }
      details(row.orderId).then(response => {
        this.getSpanArr(response.data.orderSkus)
        this.description_1 = this.parseTime(response.data.orderInfo.createTime, '{m}/{d}/{y}')
        this.description_2 = this.parseTime(response.data.orderInfo.payTime, '{m}/{d}/{y}')
        this.description_3 = this.parseTime(response.data.orderInfo.consignTime, '{m}/{d}/{y}')
        this.description_4 = this.parseTime(response.data.orderInfo.endTime, '{m}/{d}/{y}')
        this.detailsObj = response.data.orderInfo
        this.orderSku = response.data.orderSkus
        this.open = true
      })
    },
    //关闭订单
    handleClose: function (row) {
      this.$modal.confirm('是否确认结束订单编号为"' + row.skuId + '"的数据项？').then(function () {
        return close(row.skuId)
      }).then(() => {
        this.getList()
        this.$modal.msgSuccess('操作成功')
      }).catch(() => {
      })
    },
    //发货
    handleDelivery: function (row) {
      const h = this.$createElement
      this.$prompt(h('p', null, [h('i', { style: 'color: red' }, '* '),
      h('span', null, '请输入运单号：')]),
        '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^.+$/,
        inputErrorMessage: '请输入运单号'
      }).then(async ({ value }) => {
        let data = null
        data = { skuId: row.skuId, expressNum: value }
        await express(data)
        this.$modal.msgSuccess('填写成功！')
        this.getList()
      }).catch(() => {

      })
    },
    //退款
    handleReturnMoney: function (row) {
      this.$router.push({ path: '/user/orderReturn', query: { id: row.skuOrderId } })
    },
    //计算需要合并的行
    getSpanArr (data) {
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArr.push(1)
          this.pos = 0
        } else {
          // 判断当前元素与上一个元素是否相同
          if (data[i].name === data[i - 1].name) {
            this.spanArr[this.pos] += 1
            this.spanArr.push(0)
          } else {
            this.spanArr.push(1)
            this.pos = i
          }
        }
      }
    },
    //合并行
    arraySpanMethod ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 6) {//第7列
        const _row = this.spanArr[rowIndex]
        const _col = _row > 0 ? 1 : 0
        // const _col = 1
        return {
          rowspan: _row,
          colspan: _col
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.details-content {
  > div {
    line-height: 2;
  }
}
</style>
